<template>
    <div>
        <div class="flex align-end justify-between">
            <ul id="standardTypes" class="standardTypesBlock flex">
                <li :class="{'active':category_id==''}" @click="category_id='';getData()">全部</li>
                <li v-for="(item) in standardCategory" :class="{'active':category_id===item.id}" @click="category_id=item.id;getData()" :key="item.id">{{item.name}}</li>
            </ul>
            <el-button class="addBtn" type="primary" icon="el-icon-plus" size='small' @click="$router.push('/addStand')" round>创建规范</el-button>
        </div>
        
        <article class="standardData flex flex-wrap">
            <section class="standardItem standardItemIndex none" key="10d1">
                <div class="standardItemImg">
                    <img :src="require('@/assets/images/front/img0_banner.png')" alt="">
                </div>
                <div class="standardItemDesc">
                    <p class="standardName">Q语言设计规范</p>
                    <time class="standardUpdateTime">2021-12-15 16:00:00 更新</time>
                </div>
            </section>
            <section class="standardItem"  :class="{'standardItemIndex':index==0 && !category_id}" v-for="(item,index) in standardData" :key="item.id" @click="goto(item)">
                <div class="standardItemImg">
                    <img :src="item.covar_path" alt="">
                </div>
                <div class="standardItemDesc">
                    <p class="standardName">{{item.name}}</p>
                    <time class="standardUpdateTime">{{item.update_time}} 更新</time>
                </div>
            </section>
        </article>
    </div>
</template>
<script>
import {formatData} from '@/utils/index.js'
export default{
    name: 'exper',
    data(){
        return {
            standardCategory:[],
            category_id:'',
            standardData:[],
        }
    },
    created(){
        this.getCategory();
        this.getData();
        this.$store.commit('SET_ACTIVETYPE',1)
    },
    computed:{
        // newStandData:function(){
        //     if(this.category_id===0){
        //         return this.standardData
        //     }else{
        //         let arr =  this.standardData.filter((item)=>{
        //             return item.category_id === this.category_id
        //         })
        //         return arr;
        //     }
        // }
    },
    methods:{
        getData(){
            let that = this;
            that.standardData = [];
            this.$axios.get('/api/standard/list',{
                params:{
                    type:2,
                    user_id:that.$store.state.userInfo.user_id,
                    category_id:that.category_id
                }
            }).then((res)=>{
                if(res.data.data && res.data.data.length>0){
                    res.data.data.forEach(element => {
                        element.update_time = formatData(element.update_time)
                    });
                    that.standardData = res.data.data
                }
            })
        },
        getCategory(){
            let that = this;
            that.standardCategory = [];
            this.$axios.get('/api/standard/category').then((res)=>{
               that.standardCategory = res.data.data
            })
        },
        goto(item){
            this.$router.push({
                path:'/standDetail',
                query:{
                    id:item.id
                }
            })
        }
    }
}
</script>
<style scoped lang='less'>
    .standardTypesBlock{
        // margin-bottom: 0;
        position: relative;
        align-items: center;
        min-width: 800px;

		li{
		    font-size: 22px;
		    letter-spacing: 0;
		    // margin: 0 20px;
		    cursor: pointer;
            margin-right: 40px;
		}
		li.active{
		    color: #0064FF;
            font-weight: 500;
            border-bottom: 2px solid #0064FF;
		}
        // ::after{
        //     content:'';
        //     width: 100%;
        //     height: 1px;
        //     // background: #000000;
        //     position: absolute;
        //     left: 0;
        //     bottom: 0;
        //     background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
        // }
    }
    /deep/ .addBtn.el-button.is-round{
        width: 169px;
        height: 50px;
        background: #0064FF;
        border-radius: 25px;
        color: #fff;
        font-size: 20px;
    }

    .standardData{
        width: calc(100% + 37px);
        margin-top: 12px;
    }
    .standardData{
        margin-top: 20px;
    }
    .standardItem{
        width: 322px;
        height: 322px;
        background: #FFFFFF;
        box-shadow: 0 0 18px 0 rgba(0,0,0,0.10);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        margin: 18px 34px 18px 0;
    }
    .standardItemIndex{
        width: 682px;
    }
    .standardItem:hover{
        box-shadow: 0 0 10px #999;
    }
    .standardItemImg{
        width: 100%;
        height: calc(100% - 80px);
        display: flex;
        justify-content: center;
        align-items: center;
		img{
		    max-width: 100%;
		    max-height: 100%;
		}
    }
    .standardItemDesc{
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        padding: 18px;
        padding-left: 28px;
        background: #FBFBFC;
        border-radius: 0 0 9.17px 9.17px;
		.standardName{
		    font-size: 16px;
		    color: #000000;
		    letter-spacing: 0;
		    line-height: 22px;
		    opacity: 0.95;
		}
		.standardUpdateTime{
		    font-size: 12px;
		    color: rgba(0,0,0,0.30);
		    letter-spacing: 0;
		    line-height: 16.5px;
		}
    }
</style>
